<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ include file="/global/jsp-header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#uploadPhoto{height: 200px;background-color:#FFFFFF;}
span.title{font-weight: bold; display:block;background-color: #34695d; color:#FFFFFF; padding:3px 5px;}
div.centerDiv{font-weight: bold;margin:20px;background-color: #ebebeb;padding-bottom: 10px}
div.dynamicDiv{margin-left: 30px;}
.add{float: right;margin-top: -52px;margin-right: 30px;}
.nullDiv{height: 10px}
#red{color: red;margin-left: 15px}
#btns{margin-left: 120px}
</style>
<%@ include file="/global/html-header.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charsset=utf-8" />
<title>上传相片</title>
<script type="text/javascript">
var maxSize=10;
function createFileArea(){
	var dyDivSize=$(".dynamicDiv").size();
	var leftWidth=95;
	if(dyDivSize == maxSize){
		return false;
	}else if(dyDivSize > 1){
		$(window.parent.document).find("#uploadPhotoIframe").height($(this).height()+21);
		$("#uploadPhoto").height($(this).height()+23);
	}
	if(dyDivSize >= 9){
		leftWidth=88;
	}
	if(dyDivSize == maxSize-1){
		alert("你将要添加此会员的最后一张照片。");
	}
	var photoDyDivHtml='<div class="dynamicDiv" style="margin-left:'+leftWidth+'px"><label>'+(dyDivSize+1)+'.</label><input type="file" name="multiFile.upload"/></br></div>';
	$(".centerDiv").append(photoDyDivHtml);
}

function renameSubmit(submitBtn){
	submitBtn.val("上传");
	submitBtn.removeAttr("disabled");
}

function fileCheck(obj){
	var count=0;
	var submitBtn=$("#submit");
	var flag=true;
	var imgFormat=new Array(".jpg",".png",".gif",".bmp",".JPG", ".PNG", ".GIF", ".BMP");
	$("input[name='multiFile.upload']").each(function(i){
		var filePath=$(this).val();
		if(filePath != ""){
			var begin=filePath.lastIndexOf(".");
			var temp=filePath.substring(begin,filePath.length);
			var _exist=$.inArray(temp,imgFormat);
			if(_exist < 0){
				flag=false;
				alert('照片'+(i+1)+'：该图片格式不符合我们的上传标准，请选择BMP，JPG，PNG或GIF格式的照片');
				return false;
			}
			count++;
		}
	});
	if(!flag){
		renameSubmit(submitBtn);
		return false;
	}
	if(count == 0){
		alert("你还未添加任何照片！");
		renameSubmit(submitBtn);
		return false;
	}
	if(!confirm("你添加"+count+"张照片，确定上传吗？")){
		renameSubmit(submitBtn);
		return false;
	}else{
		$(".dynamicDiv").hide();
		$(".add").hide();
		$(".centerDiv").append("<span style='margin-left:110px' id='uploading'>照片正在上传中，请稍后……</span>");
	}
	$("#submit").attr("disabled",true);;
	$("#cancel").attr("disabled",true);;
	return true;
}
$(function(){
	$("#addButton").bind("click",function(){
		createFileArea();		
	});
	
	$("#cancel").bind("click",function(){
		$(window.parent.document).find("#uploadPhotoDiv").fadeOut("normal");
		$(window.parent.document).find(".upload").fadeIn("normal");
	});
	var uploadedMsg="${uploadedMsg}";
	
	$("#ok").live("click",function(){
		if(uploadedMsg.indexOf("成功") > 0){
			window.parent.location.reload();
		}
	});
	
	if(uploadedMsg != ""){
		$(".dynamicDiv").hide();
		$(".add").hide();
		$("#uploading").hide();
		$("#submit").hide();
		$("#btns").css("margin-left","175px");
		$("#cancel").val("确定");
		$("#cancel").attr("id","ok");
		$(".centerDiv").append(uploadedMsg);
	}
});
</script>
</head>
  <body>
  	<div id="uploadPhoto">
  		<span class="title">上传相片</span>
  		<form action="/example/file-upload.do" class="myform" method="post" onsubmit="return fileCheck(this)" enctype="multipart/form-data" >
	  		<div class="centerDiv">
	  			<div class="nullDiv"></div>
	  			<div class="dynamicDiv">
	  				<label>选择相片：1.</label><input name="multiFile.upload" type="file"/></br>
	  			</div>
	  		</div>
			<div class="add"><input type="button" value=" + " id="addButton"/></div>
			<div id="red">（上传说明：照片必须为BMP,JPG,PNG或GIF格式，并且不可小于10K和超过4M）</div>
			<div id="btns">
				<input type="submit" value="上传" class="button blue" id="submit"/>
			</div>
		</form>
  	</div>
  </body>
</html>
